<template>
   <section class="discount-list">
        <el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="店铺ID:">
                        <el-input type="number" placeholder="Shop ID" v-model="filter.shopId" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="活动名称:">
                        <el-input placeholder="Activity Name" v-model="filter.activityName" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="活动状态:">
                        <el-select v-model="filter.status" size="small">
                            <el-option label="所有促销" value=""></el-option>
                            <el-option label="未开始" value="not_start"></el-option>
                            <el-option label="进行中" value="saling"></el-option>
                            <el-option label="已结束" value="ended"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button style="margin-top: 55px;" size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button style="margin-top: 55px;" size="small" type="primary" @click="submitSearch()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="margin-table">
            <el-row class="table-head">
                <el-col :span="5">活动名称</el-col>
                <el-col :span="6">活动时间</el-col>
                <el-col :span="2">活动状态</el-col>
                <el-col :span="5">店铺名称</el-col>
                <el-col :span="4">店铺ID</el-col>
                <el-col :span="2">商品列表</el-col>
            </el-row>
            <el-row class="table-body" v-for="(item,i) in tableList" :key="i">
                <el-col class="table-tr avtive-name" :span="5">{{item.name}}</el-col>
                <el-col class="table-tr" :span="6">{{item.startTime | formatUpdateTime}} 至 {{item.endTime | formatUpdateTime}}</el-col>
                <el-col class="table-tr" :span="2">
                    <span style="color:#20a0ff;" v-if="item.status == 'saling'">{{item.status | formatStatus}}</span>
                    <span style="color:#ff4949;" v-else>{{item.status | formatStatus}}</span>
                </el-col>
                <el-col class="table-tr" :span="5">
                    <a target="_blank"  :href="'https://trade.onloon.net/?shopId='+item.shopId">{{item.shopName || '--'}}</a>
                </el-col>
                <el-col class="table-tr" :span="4">
                    {{item.shopId || '--'}}
                </el-col>
                <el-col class="table-tr" :span="2">
                    <el-button size="small" :type="item.seeproducts?'success':'primary'" @click="lookProductList(i)">{{item.seeproducts?'隐藏':'查看'}}</el-button>
                </el-col>
                <el-col v-if="item.seeproducts" class="product-box" :span="24">
                    <discountProductList v-if="!item.loading" :productList="item.itemList" />
                    <div  class="product-loading" v-else="item.loading">加载中...</div>
                </el-col>
            </el-row>
            <div v-if="tableList.length == 0"  class="product-loading">暂无数据</div>
        </div>
        <el-row class="paging" style='margin-top: 40px;'>
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="filter.pageNum"
              :page-sizes="[10, 20, 50,100]"
              :page-size="filter.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination> 
        </el-row>
        
   </section>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Row, Col, Form, FormItem, Button ,Select,Option,Table,Pagination,TableColumn,Input,Message,MessageBox} from 'element-ui'
    import {getDate} from '../../../utils/auth'
    import discountProductList from '~components/productsList/discountProductList.vue';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    
    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        scrollToTop: false,
        components: {
            discountProductList
        },
        head(){
            return {
                title: "限时折扣",
                meta: [
                    { hid: 'shopManage', name: 'shopManage', content: 'shopManage'}
                ]
            }
        },
        data() {
            return {
                tabName: '限时折扣',
                filter:{
                    shopId:'',
                    goodsId: '',
                    status: '',
                    activityName: '',
                    pageSize: 50, // 每页条数
                    pageNum: 1
                },
                currentPage: 1,
                totalCount: 0,
                pageSize: 50,
                tableList:[],
                listData:[],
            };
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true)
            },
            formatStatus(status) {
                if(!status) return '';
                switch (status){
                    case 'ended':
                        return '已结束';
                    case 'not_start':
                        return '未开始';
                    case 'saling':
                        return '进行中';
                    default:
                    return status;
                }
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getSearchCookieList()
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.getSearchCookieList();
            },
            empty(){//清空筛选条件
                let pageSize = this.filter.pageSize;
                let pageNum = this.filter.pageNum;
                this.filter = {
                    shopId:'',
                    goodsId: '',
                    status: '',
                    activityName: '',
                    pageSize: pageSize, // 每页条数
                    pageNum: 1
                }
            },
            submitSearch(){
                this.getSearchCookieList();
            },

            getSearchCookieList(){
                this.$store.dispatch("getDiscountActiveList",this.filter).then(res=>{
                    if(!res) {return ;}
                    let result=res.data;
                    this.totalCount = result.data.total;
                    //接口请求成功
                    if(result.code == 0 && result.data){
                        this.tableList=result.data.list;
                        for(var i = 0; i < this.tableList.length; i++){
                            this.tableList[i].loading = false;
                            this.tableList[i].seeproducts = false;
                            this.tableList[i].productList = [];
                        }
                    }
                }).catch((error) => {})
            },
            lookProductList(i){
                let item = this.tableList[i];
                item.seeproducts = !item.seeproducts;
                item.loading = false;
                this.$set(this.tableList, i, item);
                //TODO:通过活动id查询产品列表
                let params = {
                    shopId: this.tableList[i].shopId,
                    id: this.tableList[i].discountId
                }
                if(item.seeproducts && item.itemList.length == 0){
                    this.$store.dispatch("getDiscountActiveDetail",params).then(res=>{
                        if(!res) {return ;}
                        item.loading = false;
                        let result = res.data;
                        if(result.code == 0 && result.data){
                            item.itemList = result.data.itemList;
                            this.$set(this.tableList, i, item);
                        }
                    }).catch((error) => {})
                }else{
                    item.loading = false;
                }
            }
        },
        computed : {
            ...mapGetters({
               'pageTabsList': 'getPageTabsList',
            })
        },
        mounted() {
            // if(this.$store.state.btocShop.m_registerTimeBegin.length){
            //     this.gmtCreateInterval = [new Date(this.$store.state.btocShop.m_registerTimeBegin),new Date(this.$store.state.btocShop.m_registerTimeEnd)]
            // }
            this.getSearchCookieList();
        },
        created(){
            //pageTab
            //this.filter.shopName = this.$store.state.btocShop.m_shopName;
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            
        }
    }
</script>

<style lang="scss">
    .discount-list{
        a, a:hover, a:focus, a:visited{
            color: #20a0ff;
        }
        .avtive-name{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .margin-table {
            .el-icon-close{padding-right: 20px;}
            .input_text .el-input__inner{padding-right: 25px;}
        }
        .module-opera-top{
            .el-form-item{margin-bottom: 50px !important;}
        }
        .el-form--inline .el-form-item__label{
            float: left !important;
        }
        .product-box{
            max-height: 400px;
            overflow-y: scroll;
            border-top: 1px dotted #DFE6EC;
            background-color: #F6F4F4;
        }
        .product-loading{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .table-head{
            height: 40px;
            line-height: 40px;
            border: 1px solid #DFE6EC;
            background-color: #eef1f6;
            text-align: center;
            font-size: 14px;
        }
        .table-body {
            border: 1px solid #DFE6EC;
            border-top: none;
            font-size: 14px;
            .table-tr{
                line-height: 40px;
                text-align: center;
            }
        }
    }
</style>